<template>
  <van-popup :close-on-click-overlay="true" position="left" :show="isPopup">
    <div class="popup-content">
      <div class="avatar"><img src="../../assets/avatar_2.png" alt="" /></div>
      <van-button @click="this.isPopup = false" type="primary">关闭侧边栏</van-button>
      <van-button @click="login" type="primary">登录</van-button>
    </div>
  </van-popup>
  <Head class="head" @showPopup="showPopup" :titleTxt="titleTxt"></Head>
  <div class="content"><router-view></router-view></div>
  <van-tabbar :route="true" fixed v-model="tabBarIndex" @change="tabbarChange" active-color="#ee0a24">
    <van-tabbar-item replace to="/home/index" icon="home-o">首页</van-tabbar-item>
    <van-tabbar-item replace to="/home/search" icon="search">搜索</van-tabbar-item>
    <van-tabbar-item replace to="/home/singer" icon="manager-o">歌手</van-tabbar-item>
    <van-tabbar-item replace to="/home/rankingList" icon="bar-chart-o">排行榜</van-tabbar-item>
  </van-tabbar>
</template>
<script>
import Head from '@/components/head.vue'

export default {
  data() {
    return {
      isPopup: false,
      tabBarIndex: '1',
      titleTxt: '', //头部标题
      startClientX: 0,
      endClientX: 0,
    }
  },
  components: { Head },
  created() {
    //如果标题为空则从浏览器获取
    if (this.titleTxt == '') {
      this.titleTxt = localStorage.getItem('titleTxt')
    }
  },
  methods: {
    showPopup() {
      this.isPopup = true
    },
    //底部tabbar切换
    tabbarChange(e) {
      switch (e) {
        case 0:
          this.titleTxt = '首页'
          break
        case 1:
          this.titleTxt = '搜索'
          break
        case 2:
          this.titleTxt = '歌手'
          break
        case 3:
          this.titleTxt = '排行榜'
          break
      }
      //将标题缓存到浏览器中
      localStorage.setItem('titleTxt', this.titleTxt)
    },
    login() {
      this.$router.push({ name: 'login', params: { test: '' } })
    },
  },
}
</script>
<style lang="less" scoped>
.content {
  margin-top: 1.2rem;
  overflow-y: scroll;
}
.popup-content {
  width: 6rem;
  height: calc(100vh - 20px);
  display: flex;
  padding: 10px 0;
  flex-direction: column;
  align-items: center;
  .avatar {
    width: 60px;
    height: 60px;
    overflow: hidden;
    border-radius: 50%;

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
}
</style>
  